import React, {useEffect} from "react"
import {ArrowLeftOutlined} from "@ant-design/icons";
import {Form, Input, Button, PageHeader, message, Checkbox, Select} from "antd";
import {postJSON, putJSON, get} from "../../../shared/server"
import ToolTipsInput from "../../../shared/libs/tooltips-input";
import {regex_mobile, regex_userName, regex_name} from "project-config"
import {validateHook} from "../common/index";
import CheckOutlined from "@ant-design/icons/lib/icons/CheckOutlined";

const AccountForm = (props) => {
	const {role, roleName} = props
	const {history, match: {params}} = props;
	const isEdit = params.id && params.id >= 0;
	const [form] = Form.useForm();
	const idParams = params.id ? {id: params.id} : {}
	const {loginNameValidate, phoneValidate, phoneNoStatus, loginNameStatus, setLoginNameStatus, setPhoneNoStatus,} = validateHook(idParams);
	const layout = {
		labelCol: {span: 6},
		wrapperCol: {span: 16},
	};
	const tailLayout = {
		wrapperCol: {offset: 6, span: 16},
	};

	useEffect(() => {
		if (isEdit) {
			get(`/management/account/admin/${params.id}`).then(data => {
				form.setFieldsValue({
					loginName: data.loginName,
					name: data.name,
					phoneNo: data.phoneNo,
					remarks: data.remarks,
					role: role
				})
			})
		}
	}, []);

	const onFinish = values => {
		if (isEdit) {
			putJSON(`/management/account/admin/${params.id}`, {
				name: values.name,
				phoneNo: values.phoneNo,
				remarks: values.remarks
			}).then(result => {
				if (result) {
					message.success("更新成功")
					history.push(`/app/account/${role || 'admin'}`)
				}
			})
		} else {
			values.role = role
			postJSON('/management/account/admin', values).then(result => {
				if (result) {
					message.success("添加成功")
					if (values.continue) {
						form.resetFields();
						setLoginNameStatus({});
						setPhoneNoStatus({});
					} else {
						history.push(`/app/account/${role || 'admin'}`);
					}
				}
			})
		}
	};

	const onFinishFailed = errorInfo => {
		console.log('Failed:', errorInfo);
	};


	return (
		<div className="zr-panel">
			<div className="zr-panel-header">
				<PageHeader backIcon={<ArrowLeftOutlined/>}
				            onBack={() => window.history.back()} title={`${isEdit ? "编辑" : "新增"}${roleName || '管理员'}`}
				            subTitle=""/>
			</div>
			<div className="zr-list-page-box body-bg body-border absolute">
				<div className="zr-table-box">
					<Form
						{...layout}
						style={{paddingTop: 20, width: 500, margin: "0 auto"}}
						form={form}
						name="basic"
						onFinish={onFinish}
						onFinishFailed={onFinishFailed}
					>
						<Form.Item
							label="登录名"
							name="loginName"
							hasFeedback
							{...loginNameStatus}
							validateFirst={true}
							rules={[
								{required: true, message: "登录名必须填写"},
								{pattern: regex_userName, message: "使用2-20位字母|数字|#_@.-"},
								{validator: loginNameValidate}
							]}
						>
							<ToolTipsInput
								title="可输入2-20位[数字/字母/@_.#-]"
								id="_loginName"
								placeholder="请输入登录名"
								disabled={isEdit}
							/>
						</Form.Item>
						<Form.Item
							label="姓名"
							name="name"
							validateFirst={true}
							rules={[{required: true, message: '姓名必须填写'}, {
								pattern: regex_name, message: "姓名只能是中文或者英文或数字"
							}]}
						>
							<ToolTipsInput title="请输入中文/英文" id={'_name'} placeholder="请输入姓名"/>
						</Form.Item>
						<Form.Item
							label="手机号码"
							name="phoneNo"
							hasFeedback
							{...phoneNoStatus}
							validateFirst={true}
							rules={[{required: true, message: '手机号码必须填写'},
								{pattern: regex_mobile, message: '请输入正确的国内手机号',},
								{validator: (_, value, callback) => phoneValidate(_, value, callback, isEdit ? params.id : null)}
							]}
						>
							<ToolTipsInput
								title="有效的国内手机号码"
								id="_phoneNo"
								placeholder="请输入有效的手机号码"
							/>
						</Form.Item>

						<Form.Item
							label="备注"
							name="remarks"
							rules={[{required: false, message: '备注!'}]}
						>
							<Input.TextArea/>
						</Form.Item>
						{
							isEdit
								? null
								: <Form.Item
									{...tailLayout}
									name="continue"
									valuePropName="checked"
									rules={[{required: false, message: '是否继续添加'}]}
								>
									<Checkbox>连续添加</Checkbox>
								</Form.Item>
						}
						<Form.Item {...tailLayout}>
							<Button type="primary" htmlType="submit">
								<CheckOutlined/> 保存
							</Button>
							<Button style={{marginLeft: 10}} onClick={() => window.history.back()}>
								返回
							</Button>
						</Form.Item>
					</Form>
				</div>
			</div>
		</div>
	)
}

export default AccountForm;